import React, { useEffect, useState } from 'react';
import { Button, Card, message, Space, Tabs } from 'antd';
// import { queryCurrentUser } from '@/services/account';
import BaseView from './components/BaseView';
import AvatarView from './components/AvatarView';
import styles from './index.less';
import { API } from '@/services/typings';
import { resetPasswordAPI, updateSelfAPI } from '@/pages/User/account-center/service';
import { useModel } from '@@/exports';
import AlterPassword from '@/pages/User/account-center/components/AlterPassword';

const { TabPane } = Tabs;

const Center: React.FC = () => {
  const [user, setUser] = useState<API.CurrentUser>({} as API.CurrentUser);
  const [loading, setLoading] = useState(true);
  const {initialState, setInitialState} = useModel('@@initialState');


  const fetchUser = async () => {
    try {
      const userInfo = await initialState?.fetchUserInfo?.();
      setInitialState({
        ...initialState,
        currentUser: userInfo,
      });
      setUser(userInfo as API.CurrentUser);
    } catch (error) {
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUser();
  }, []);


  const handleUpdate = async (values: API.CurrentUser) => {
    const {data} = await updateSelfAPI({...values, id: user.id} as any)
    if (data) {
      message.success("修改成功")
      await fetchUser()
    }
  };

  const handleAvatarChange = async (url: string) => {
    const {data} = await updateSelfAPI({id: user.id, avatar: url} as any)
    if (data) {
      await fetchUser()
    }
  };

  return (
    <div className={styles.center}>
      <Card
        bordered={false}
        loading={loading}
        title={<h3>个人中心</h3>}
        extra={<Space>
          <Button
            onClick={() => {
              window.history.back()
            }}
            type="primary">返回</Button>
        </Space>}
        bodyStyle={{minHeight: `80vh`}}
      >
        <Tabs defaultActiveKey="1" tabPosition="left">
          <TabPane tab="基本设置" key="1">
            <div className={styles.left}>
              <Card
                title="个人头像"
                bordered={false}
                style={{marginBottom: 24}}
              >
                <AvatarView
                  avatar={user?.avatar || ''}
                  onChange={handleAvatarChange}
                />
              </Card>
            </div>
            <div className={styles.right}>
              <Card title="基本信息" bordered={false}>
                <BaseView
                  user={user}
                  onUpdate={handleUpdate}
                />
              </Card>
            </div>
          </TabPane>
          <TabPane tab="安全设置" key="2">
            <Card title="修改密码" bordered={false}>
              <AlterPassword
                handleUpdate={async (values) => {
                  const {data} = await resetPasswordAPI({
                    oldPassword: values.oldPassword,
                    newPassword: values.newPassword,
                    confirmPassword: values.confirmPassword
                  })
                  if (data) {
                    message.success("修改成功")
                  }
                }}
              />
            </Card>
          </TabPane>
        </Tabs>
      </Card>
    </div>
  );
};

export default Center;
